<template>
  <div class="main">
      <div class="userViewHeader">
        <el-row :gutter="0">
        <el-col :span="3" :offset="3"><div >
          <el-menu :default-active="menuIndex" class="el-menu-demo" mode="horizontal" @select="selectMenu">
           <el-menu-item index="1">首页</el-menu-item>
          </el-menu>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <el-input v-model="content" placeholder="请输入搜索内容" style="width:300px;margin-top:10px"></el-input>
          <el-button type="primary" icon="el-icon-search" circle size="small" style="margin-left: 15px" @click="select"></el-button>
          </div></el-col>
        <el-col :span="2" :offset="6" ><div>
          <el-button  v-if="admin" style="margin-top: 10px" icon="el-icon-s-tools" @click="goAdmin" type="primary" round>控制台</el-button>
          </div></el-col>
        <el-col :span="2" :offset="model1"><div><el-avatar icon="el-icon-user-solid" size="medium" style="margin-top: 10px"></el-avatar>
         <el-link :underline="false" style="margin-top: -20px">&ensp;{{user.userName}}</el-link>
         <div class="logout">
          <el-popconfirm title="您确认退出吗？" @confirm = 'logout'>
            <i slot="reference" title="logout" class="el-icon-switch-button"></i>
          </el-popconfirm>
        </div>
       </div></el-col>
        </el-row>
      </div>
      <div >
        <router-view></router-view>
      </div>
     
  </div>
</template>

<script>
import requst from '@/utils/request'
export default {
  data () {
   return {
    //搜索数据
     selectData: {title: '',text: ''},
     //文章绑定的数据
     articleData: [1,2,3,4,5,6,7,8,9,10,11,12,13],
     //绑定菜单栏---首页
     menuIndex: '1',
     //绑定搜索框
     content: '',
     user: {},
     //判断是不是管理员
     admin: false,
     //用于绑定位置
     model1: 8
   }
  },
  methods: {
    //选择首页
    selectMenu (index) {
      if(index == '1'){
        if(this.$route.path != "/home"){
          this.$router.push("/home")
        }
      }
    },
    //搜索
    select () {
    this.selectData.title = this.content
    this.selectData.text = this.content
    if(this.$route.path !="/select" ){
    this.$router.push({name: "select",params: this.selectData})
    this.content = ''
    }else{
      this.$router.go(0)
      this.content = ''
    }
    
  },
  //退出登录
  logout () {
      requst.post("http://localhost:8095/user/logout")
      this.$router.push("/login")
      this.$message.success("退出成功")
  },
  goAdmin () {
    this.$router.push("/dashboard")
  }
  },
  created () {
    //获取本地user的数据
    this.user = JSON.parse(localStorage.getItem("user"))
    //判断是不是管理员
    if(JSON.parse(localStorage.getItem("user")).userLimit == 2){
      this.admin = true
      this.model1 = 0
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  overflow: hidden;
  background-color: #F4F6F9
}
.userViewHeader {
  background-color: white;
}
.logout {
      font-size: 20px;
      color: #999;
      cursor: pointer;
      padding: 0 15px;
      float: right;
      margin-top: -32px;
    }

</style>
